<template>
  <div v-if="systeminfo">
    <div class="memory">
      <div class="item">
        <el-slider
          v-model.number="form.Memory"
          vertical
          :max="systeminfo.MemTotal"
          height="250px">
        </el-slider>
        <p class="title">内存限制 bit/s</p>
      </div>
      <div class="item">
        <el-slider
          v-model.number="form.KernelMemory"
          :max="systeminfo.MemTotal"
          vertical
          height="250px">
        </el-slider>
        <p class="title">内核内存限制 bit/s</p>
      </div>
      <div class="item">
        <el-slider
          v-model.number="form.KernelMemoryTCP"
          :max="systeminfo.MemTotal"
          vertical
          height="250px">
        </el-slider>
        <p class="title">缓冲内存限制 bit/s</p>
      </div>
      <div class="item">
        <el-slider
          v-model.number="form.MemoryReservation"
          :max="systeminfo.MemTotal"
          vertical
          height="250px">
        </el-slider>
        <p class="title">内存软限制 bit/s</p>
      </div>
      <div class="item">
        <el-slider
          v-model.number="form.MemorySwap"
          :max="systeminfo.MemTotal"
          vertical
          height="250px">
        </el-slider>
        <p class="title">总内存限制 bit/s</p>
      </div>
      <div class="item">
        <el-slider
          v-model.number="form.MemorySwappiness"
          vertical
          height="250px">
        </el-slider>
        <p class="title">调整交换行为 0-100</p>
      </div>
    </div>
  </div>
  <div v-else>
    网络不畅，请重试！
  </div>
</template>

<script>
import post from '@/utils/post'
export default {
  data () {
    return {
      systeminfo: null,
      form: {
        Memory: null,
        KernelMemory: null,
        KernelMemoryTCP: null,
        MemoryReservation: null,
        MemorySwap: null,
        MemorySwappiness: null
      }
    }
  },
  props: ['item'],
  watch: {
    // 数据回填
    item: function () {
      if (this.item) {
        this.form.Memory = this.item.HostConfig.Memory
        this.form.KernelMemory = this.item.HostConfig.KernelMemory
        this.form.KernelMemoryTCP = this.item.HostConfig.KernelMemoryTCP
        this.form.MemoryReservation = this.item.HostConfig.MemoryReservation
        this.form.MemorySwap = this.item.HostConfig.MemorySwap
        this.form.MemorySwappiness = this.item.HostConfig.MemorySwappiness
      }
    },
    // 监听vuex中是isupload是否变化为true，true则上传本组件的数据。
    '$store.state.isUpload': function () {
      if (this.$store.state.isUpload) {
        this.$emit('data', ['Memory', this.form])
      }
    }
  },
  mounted () {
    const docker = 'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/info"'
    post({ docker }, (res) => {
      this.systeminfo = res
    }, this)
  }
}
</script>

<style lang="scss" scoped>
.memory{
  padding: 20px 0px;
  display: flex;
  justify-content: space-around;
  .item{
    display: flex;
    flex-direction: column;
    align-items: center;
    .title{
      margin-top: 15px;
      font-size: 14px;
    }
  }
}
</style>
